// 全屏适配工具 - 支持多种屏幕尺寸
class FullScreenAdapter {
  constructor() {
    this.designWidth = 1920
    this.designHeight = 1080
    this.currentWidth = window.innerWidth
    this.currentHeight = window.innerHeight
    this.isFullscreen = false
    
    this.init()
  }

  init() {
    this.setFullScreenStyles()
    this.bindEvents()
  }

  setFullScreenStyles() {
    const root = document.documentElement
    const body = document.body
    
    // 计算缩放比例，确保内容填满屏幕
    const widthScale = this.currentWidth / this.designWidth
    const heightScale = this.currentHeight / this.designHeight
    const scale = Math.min(widthScale, heightScale) // 使用最小比例确保内容完全可见
    
    // 设置CSS变量
    root.style.setProperty('--screen-width', `${this.currentWidth}px`)
    root.style.setProperty('--screen-height', `${this.currentHeight}px`)
    root.style.setProperty('--scale-ratio', scale)
    
    // 设置响应式尺寸
    const baseFontSize = 16
    const baseSpacing = 20
    const baseRadius = 8
    
    root.style.setProperty('--responsive-font-size', `${baseFontSize * scale}px`)
    root.style.setProperty('--responsive-spacing', `${baseSpacing * scale}px`)
    root.style.setProperty('--responsive-border-radius', `${baseRadius * scale}px`)
    root.style.setProperty('--responsive-shadow', `0 0 ${10 * scale}px rgba(0, 0, 0, 0.3)`)
    
    // 设置容器样式
    body.style.width = '100vw'
    body.style.minHeight = '100vh'
    body.style.overflowX = 'hidden'
    body.style.overflowY = 'auto'
    body.style.margin = '0'
    body.style.padding = '0'
    
    // 设置网格布局
    this.setGridLayout()
    
    // 设置字体大小
    this.setResponsiveFonts()
    
    // 设置图表尺寸
    this.setChartSizes()
  }

  setGridLayout() {
    const root = document.documentElement
    const width = this.currentWidth
    const height = this.currentHeight
    const ratio = width / height
    
    let columns = 3
    let gap = 20
    let mainHeight = 'auto'
    
    if (ratio > 2.5) {
      // 超宽屏 (21:9, 32:9)
      columns = 3
      gap = 30
      mainHeight = 'auto'
    } else if (ratio >= 1.7) {
      // 宽屏 (16:9)
      columns = 3
      gap = 25
      mainHeight = 'auto'
    } else if (ratio >= 1.3) {
      // 标准屏 (4:3)
      columns = 3
      gap = 20
      mainHeight = 'auto'
    } else if (ratio >= 0.8) {
      // 方屏
      columns = 2
      gap = 15
      mainHeight = 'auto'
    } else {
      // 竖屏
      columns = 1
      gap = 10
      mainHeight = 'auto'
    }
    
    const scale = Math.min(this.currentWidth / this.designWidth, this.currentHeight / this.designHeight)
    
    root.style.setProperty('--grid-columns', columns)
    root.style.setProperty('--grid-gap', `${gap * scale}px`)
    root.style.setProperty('--main-height', mainHeight)
  }
  
  setResponsiveFonts() {
    const root = document.documentElement
    const scale = Math.min(this.currentWidth / this.designWidth, this.currentHeight / this.designHeight)
    
    // 设置不同层级的字体大小
    root.style.setProperty('--title-font-size', `${32 * scale}px`)
    root.style.setProperty('--subtitle-font-size', `${14 * scale}px`)
    root.style.setProperty('--chart-title-font-size', `${16 * scale}px`)
    root.style.setProperty('--data-font-size', `${24 * scale}px`)
    root.style.setProperty('--label-font-size', `${12 * scale}px`)
    root.style.setProperty('--small-font-size', `${10 * scale}px`)
  }
  
  setChartSizes() {
    const root = document.documentElement
    const scale = Math.min(this.currentWidth / this.designWidth, this.currentHeight / this.designHeight)
    
    // 设置图表容器尺寸
    root.style.setProperty('--chart-height', `${300 * scale}px`)
    root.style.setProperty('--chart-small-height', `${200 * scale}px`)
    root.style.setProperty('--chart-large-height', `${400 * scale}px`)
    root.style.setProperty('--map-height', `${600 * scale}px`)
  }

  bindEvents() {
    // 窗口大小变化事件
    window.addEventListener('resize', () => {
      this.currentWidth = window.innerWidth
      this.currentHeight = window.innerHeight
      this.setFullScreenStyles()
      this.notifyChartsResize()
    })
    
    // 全屏状态变化事件
    document.addEventListener('fullscreenchange', () => {
      this.isFullscreen = !!document.fullscreenElement
      setTimeout(() => {
        this.currentWidth = window.innerWidth
        this.currentHeight = window.innerHeight
        this.setFullScreenStyles()
        this.notifyChartsResize()
      }, 100)
    })
    
    // 键盘快捷键
    document.addEventListener('keydown', (e) => {
      if (e.key === 'F11') {
        e.preventDefault()
        this.toggleFullscreen()
      }
    })
  }
  
  notifyChartsResize() {
    // 通知所有图表组件重新调整大小
    window.dispatchEvent(new Event('chart-resize'))
  }
  
  toggleFullscreen() {
    if (!this.isFullscreen) {
      this.enterFullscreen()
    } else {
      this.exitFullscreen()
    }
  }
  
  enterFullscreen() {
    const element = document.documentElement
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  }
  
  exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }

  getScreenInfo() {
    return {
      width: this.currentWidth,
      height: this.currentHeight,
      ratio: this.currentWidth / this.currentHeight,
      scale: Math.min(this.currentWidth / this.designWidth, this.currentHeight / this.designHeight),
      isFullscreen: this.isFullscreen,
      deviceType: this.getDeviceType()
    }
  }
  
  getDeviceType() {
    const ratio = this.currentWidth / this.currentHeight
    if (ratio > 2.5) return 'ultrawide'
    if (ratio >= 1.7) return 'desktop'
    if (ratio >= 1.3) return 'laptop'
    if (ratio >= 0.8) return 'tablet'
    return 'mobile'
  }
}

export default new FullScreenAdapter()
